<template>
	<scroll-view scroll-y="true"  scroll-with-animation :scroll-into-view="topId" @scrolltolower="scrollwdj" @scroll="scrolltop" class="scrollwdj" upper-threshold="50">
	
	<view  id="top"></view>
	<view>
		   <Nav leftTitle="上海" title="macke" :rightslot=true namecar="car" @clickfilter='clickfilter'/>  
		   <template v-if="this.tabbarvalue==0">
		   
	
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item  v-for="(item,index) in banner" :key="index" @click="linkpage(item.link)">
					<image :src="item.img" mode="" ></image>
			</swiper-item>
			
		</swiper>
		<Hometitle/>
		<scroll-view class="swiperclass" scroll-x="true" >
			<view>
				<image src="../../static/recommend1.jpeg" mode="heightFix"></image>
				<image src="../../static/recommend2.jpg" mode="heightFix"></image>
				<image src="../../static/recommend3.jpg" mode="heightFix"></image>
			</view>
		</scroll-view>
		<Hometitle/>
		<scroll-view class="swiperclass" scroll-x="true" >
			<view>
				<image src="../../static/recommend1.jpeg" mode="heightFix"></image>
				<image src="../../static/recommend2.jpg" mode="heightFix"></image>
				<image src="../../static/recommend3.jpg" mode="heightFix"></image>
			</view>
		</scroll-view>
	
		  </template>
		<Goodtime :goodDate="goodDate" />
		<!-- 底部导航 -->
		<u-tabbar
			:value="tabbarvalue"
			@change="tabbarchange"
			:fixed="true"
			:placeholder="false"
			:safeAreaInsetBottom="false"
		>
			<u-tabbar-item text="首页" icon="home"  ></u-tabbar-item>
			<u-tabbar-item text="蛋糕" icon="photo"  ></u-tabbar-item>
			<u-tabbar-item text="面包" icon="play-right" ></u-tabbar-item>
			<u-tabbar-item text="小食" icon="account"  ></u-tabbar-item>
			<u-tabbar-item text="购物车" icon="account"  ></u-tabbar-item>
		</u-tabbar>
	</view>
	<!-- 回到顶部按钮 -->
	<view class="backtop" v-show="isshow" @click="backtop">
		回到顶部
	</view>
	<!-- 弹出框 -->
	<u-popup :show="showupopup" @close="showupopup=false" mode="left" >
	           <view class="">
				   <u-collapse
				      
					   class="collapseclass"
				     >
				       <u-collapse-item
				         title="口味筛选"
				         name="Docs guide"
				       >
				         <text :class="['u-collapse-content',datafilterlist==index?'activeclass':'']" v-for="(item,index) in filterdata.list" :key="index" @click="checkfilterlist(index,item)">{{item.tname}}</text>
				       </u-collapse-item>
					   <u-collapse-item
					     title="场景筛选"
					     name="Docs guide"
					   >
					     <text :class="['u-collapse-content',datafilterscene==index?'activeclass':'']" v-for="(item,index) in filterdata.scene" :key="index" @click="checkfilterscene(index,item)">{{item.tname}}</text>
					   </u-collapse-item>
				   </u-collapse>
				   <view class="collapsebutton">
					   <button type="primary" class="buttnclass" @click="confirm">确认</button>
					   <button type="default" class="buttnclass" @click="reduce">取消</button>
				   </view>
			   </view>
	</u-popup>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				banner:[], //轮播图
				tabbarvalue:0, //选中的底部tab下标
				goodDate:[] ,//展示商品的信息
				 condition:{ //商品列表查询条件对象
				 	bcid:1
				},
				page:1,
				topId:'', //返回到顶部得id
				isshow:false, //用来判断回到顶部得按钮显示和隐藏
				showupopup:false ,//控制弹出框
				filterdata:[] ,//筛选条件的数据
				datafilterlist:0, //口味筛选选中的下标
			datafilterscene:0 //场景筛选选中的下标
			};
		},
		methods:{
			//点击筛选按钮，实现筛选功能
			clickfilter(){
				this.showupopup = true
			},
			//切换口味筛选
			checkfilterlist(index,item){
				// this.goodDate = []
				console.log(item,'item');
				this.$delete(this.condition,'sid')
				this.$set(this.condition,'fid',item.tid)
				this.datafilterlist = index
				
			},
			//切换场景筛选
			checkfilterscene(index,item){
				// this.goodDate = []
				console.log(item,'item');
				this.datafilterscene = index
				this.$delete(this.condition,'fid')
				this.$set(this.condition,'sid',item.tid)
				console.log(this.condition);
				
			},
			//筛选中的确认功能
			confirm(){
				this.goodDate = []
				this.showupopup = false
				this.getdata()
			},
			//筛选中的取消功能
			reduce(){
				this.showupopup = false
				this.datafilterlist=0
				this.datafilterscene=0
				this.$delete(this.condition,'sid')
				this.$delete(this.condition,'fid')
			},
			//商品展示方法
			getdata(){
				let skip = this.page * 8
				console.log(this.condition,'this.condition');
				let wh = JSON.stringify(this.condition)
				console.log(wh,'WH');
				let url = `/1.1/classes/goods?where=${wh}&limit=8&skip=${skip}`
				this.$http(url).then(res=>{
					console.log(res,'resd');
						uni.stopPullDownRefresh()
					if(res.results.length>0){
						this.goodDate = [...this.goodDate,...res.results]
					}else{
						uni.showToast({
							title:'这回是真没了'
						})
					}
				})
			},
			//切换tab栏时触发
			tabbarchange(value){
				this.goodDate = []
				this.$delete(this.condition,'sid')
				this.$delete(this.condition,'fid')
				this.tabbarvalue = value
				switch(value){
					case 1:
					this.condition.bcid = Number(1)
					this.getdata()
					break;
					case 2:
					this.condition.bcid = Number(11)
					this.getdata()
					break;
					case 3:
					this.condition.bcid = Number(6)
					this.getdata()
					break
					case 4:
					console.log(456789)
					uni.navigateTo({
						url:'/pages/car/car'
					})
					break
				}
				this.page = 1
				
			},
			//点击图片进行跳转
			linkpage(link){
				console.log(123);
				uni.navigateTo({
					url:"./linkhome?link="+link
				})
			},
			//点击回到顶部实现回到顶部得功能
			backtop(){
			this.topId = 'top'
			},
			//监听滚动得距离，实现回到顶部的功能
			scrolltop(e){
				let {scrollTop} = e.detail
				if(scrollTop>500){
					this.isshow = true
					
				}else{
					this.topId = ''
					this.isshow = false
				}
			},
			//滚动加载数据，需要配合scroll-view 内置组件才可以成功
			scrollwdj(){
				this.page++
				this.getdata()
					
			
			},
		},
		onLoad() {
			//获取轮播图得接口
			this.$http('/1.1/classes/banner').then(res=>{
				this.banner = res.results
			})
			//初始化展示商品
			this.getdata()
			//初始化时拿到筛选条件的数据
			this.$http('/1.1/classes/classify').then(res=>{
				this.filterdata = res.results[0]
			})
			
		},
		onShow(){
			this.tabbarvalue = 0
		},
		//页面销毁时将滚动监听得函数清除
		onHide() {
			// this.scrolltop = null
		},
		//下拉刷新，将所有数据重置
		onPullDownRefresh(){
			this.$delete(this.condition,'sid')
			this.$delete(this.condition,'fid')
			this.page = 1
			this.goodDate = []
			this.getdata()
		}
	}
</script>

<style lang="scss" scoped>
.banner{
	padding: 100rpx 0 10rpx;
	height: 500px;
	swiper-item{
		height: 100%;
	}
	image{
		width: 100%;
		height: 100%;
	}
}
.swiperclass{
	white-space: nowrap;
	image{
		height: 150px;
	}
}
.scrollwdj{
	height: 100vh;
}
.backtop{
	width: 150rpx;
	height: 50rpx;
	background-color: orange;
	position: fixed;
	right: 0rpx;
	bottom: 300rpx;
	border-radius: 25rpx 0 0 25rpx;
	text-align: center;
}
.collapseclass{
	
	width: 400rpx;
	.activeclass{
		background-color: #c1a096;
	}
}
.collapsebutton{
		width: 80%;
		height: 100rpx;
		background-color: #f1eae0;
		position: absolute;
		bottom: 100rpx;
		right: 10%;
		display: flex;
		align-items: center;
		border-radius: 50px;
		.buttnclass{
			width: 130rpx;
			height: 70rpx ;
			font-size: 14px;
		}
	}
</style>
